var Content = [
  [
    `<h2>色彩心理学是什么</h2>`,
    `
    <p>色彩心理学是一门研究色彩对我们心理产生的各种影响，以及运用色彩的魔力让我们的生活变得更美好的学科。</p>
    <p>色彩心理学并不是一门高深严谨的学科，充满趣味并且我们多多少少都对她有一些了解。</p>
    <i>比如我都知道黑色显瘦，白色显胖。</i>
    <p>色彩心理学的应用非常广泛，生活中到处都能看到她的影子，同样也遵循着以人为本的理念。</p>
    <i>比如大多纸箱子都是浅色的，目的就是看起来比较轻，让搬运者心情舒坦一些。</i>
    `,
  ],
  [
    `<h2>色彩对我们感官的影响</h2>`,
    `
    <p>色彩会影响我们对物体的判断，之前已经提到过黑色显瘦和浅色的纸箱子看起来更轻了，影响了我们对物体体积及质量的判断，此次之外，还有温度，距离，味道等等。</p>
    `,
    `
    <div class="content_small_img">
      <img src="img/pic2_1.jpg">
      <img src="img/pic2_2.jpg">
      <img src="img/pic2_3.jpg">
      <img src="img/pic2_4.jpg">
      <img src="img/pic2_5.jpg">
    </div>
    `,
    `
    <i>上面这些图片展示了色彩对我们感官的影响，不过这并不不是全部，还有其他很多方面。比如色彩会影响我们对时间的判断，冷色会让我们觉得时间过得很慢，暖色却相反。明快的色彩会让我们心情愉悦，而深沉的色彩会让我们感觉到抑郁。</i>
    `,
  ],
  [
    `<h2>色相轮</h2>`,
    `<div class="content_small_img">
      <img src="img/pic3.jpg" style="width:20em">
    </div>
    `
  ],
  [
    `<h2>单色的象征</h2>`,
    `<p>每一种颜色都会给我带来不同的感觉，色彩也被我们赋予了一些象征的意义。</p>
    <p>我们可以通过搭配颜色，让我们的生活更加美好，也可以通过某人对颜色的喜好了解他的性格。</p>
    <i>接下来我们看一看常用的颜色都有哪些象征吧。</i>
    `
  ],
  [
    `<h2>红色--力量</h2>`,

    `
    <img class="pic_page" src="img/pic4_1.jpg">
    <p class="red">活泼，积极，热情，爽快，新的开始，先驱，名誉，喜庆</p>
    <p class="blue">疲劳，攻击性，好色，肆意妄为，不满，性急，冲动，虚荣，血腥</p>`,
    `<p>红色会让我们血压上升，呼吸急促，脉搏加快，味觉和嗅觉变得敏感，食欲旺盛（是说火锅么？）</p>`,
    `<p>喜欢红色的人，一般外向，活泼好动，行动力强，情欲起伏比较大，鲁莽，热情，极富正义感。</p>
    `
  ],
  [
    `<h2>粉红--浪漫</h2>`,
    `<img class="pic_page" src="img/pic4_2.jpg">
    <p class="red">可爱，女人味，孩子气，羞涩，柔和，温馨</p>
    <p class="blue">缺乏自信，浅薄，幼稚</p>`,
    `<p>粉红象征女性，优雅甜美，细腻富有女人味</p>`,
    `<p>喜欢粉红的人，一般心地善良，感情丰富，稳重温柔，向往爱情和婚姻，敏感易受伤害。</p>
    `
  ],
  [
    `<h2>黄色--喜悦</h2>`,
    `<img class="pic_page" src="img/pic4_3.jpg">
    <p class="red">喜悦，智慧，太阳，成功，权利，灵活，生机</p>
    <p class="blue">欺骗，心不在焉，轻率，强迫，胆怯，挫折，自私</p>`,
    `<p>黄色有着很高的注目性，能短时间内吸引人的兴趣，是启蒙和智慧的象征，还象征着财富和地位，这与黄金和皇权有一定关系,黄色能减轻失望感，让人喜悦，愉快和温暖，对抑郁和疲劳有一定的缓解作用。过度使用黄色却会加剧压力，产生焦虑和紧张</p>`,
    `<p>喜欢黄色的人，一般自由奔放，做事毫无顾忌，喜欢挑战，喜欢新事物，却也容易喜新厌旧，缺乏长性。</p>
    `
  ],
  [
    `<h2>橙色--生命力</h2>`,
    `
    <img class="pic_page" src="img/pic4_4.jpg">
    <p class="red">宽容，温柔，勇敢，温暖，精力充沛，自豪，自由</p>
    <p class="blue">烦躁，迟钝，轻率，傲慢，浪费，虚荣，不道德</p>`,
    `<p>橙色可以让人使人困乏，有助于入睡，可以降低血液循环，刺激免疫系统，辅助治疗</p>`,
    `
    <p>喜欢橙色的人，一般善于社交，不喜欢独处，亲切友好，理解能力墙，思维快捷，语言表达能力强，充满朝气。</p>
    `
  ],
  [
    `<h2>蓝色--真实</h2>`,
    `
    <img class="pic_page" src="img/pic4_5.jpg">
    <p class="red">和谐，利落，深思熟虑，诚实，虔诚，贤明，慎重，智慧，记忆</p>
    <p class="blue">凶狠，压抑，迟钝，顽固，忧郁，寒冷，隔离，健忘</p>`,
    `<p>蓝色是天空和海洋的颜色，喜欢蓝色的人是最多的。蓝色平稳兴奋情绪，呼吸变深，体温降低，抑制打斗情绪。</p>`,
    `
    <p>喜欢蓝色的人，一般情感丰富，却不乏自制力，有耐心和韧性，谦虚谨慎，固执，和平。</p>
    `
  ],
  [
    `<h2>绿色--和平</h2>`,
    `
    <img class="pic_page" src="img/pic4_6.jpg">
    <p class="red">成长，收获，宽容，才能，新鲜，幸运，慷慨，爱情，自然，和谐</p>
    <p class="blue">崩溃，苦涩，怀疑，嫉妒，腐败，倒霉，贪欲，妒忌</p>`,
    `<p>绿色是大自然的颜色，有着和谐和健康的的象征，能增强食欲，减轻疼痛，缓解用眼疲劳。</p>`,
    `
    <p>喜欢绿色的人，一般社会意识较强，认真和平，喜欢大自然和动物，礼貌直率，好奇心强。</p>
    `
  ],
  [
    `<h2>棕色--忍耐</h2>`,
    `
    <img class="pic_page" src="img/pic4_7.jpg">
    <p class="red">典雅，坚固，安全，成熟，稳重，冷静，舒适，豪华</p>
    <p class="blue">迟钝，苦涩，腐烂，悲凉，阴森</p>`,
    `<p>棕色是大地的颜色，象征着肥沃，给人厚重稳定的感觉。</p>`,
    `<p>喜欢棕色的人，一般比较简朴，缺乏趣味和灵活性，有担当，勤恳，耐心。</p>
    `
  ],
  [
    `<h2>紫色--品味</h2>`,
    `
    <img class="pic_page" src="img/pic4_8.jpg">
    <p class="red">平静，高贵，重要，公正，无私，神秘，梦幻，温柔，品味</p>
    <p class="blue">傲慢，势利，独裁，无情，欺骗</p>`,
    `<p>紫色有高贵和风度的象征，也象征着梦幻和神秘，代表着女性的温柔，品味与温柔。</p>`,
    `<p>喜欢棕色的人，女性一般心高气傲，男性却多有含羞的性格，喜欢追求洗练的食物，有格调有主张，爱好艺术，且有天赋。</p>
    `
  ],
  [
    `<h2>灰色--包容</h2>`,
    `
    <img class="pic_page" src="img/pic4_9.jpg">
    <p class="red">尊敬，现实，神秘，高级，包容，小心</p>
    <p class="blue">阴郁，厌恶，小城，猥琐，背叛</p>`,
    `<p>灰色容易联想到阴天，所以会给人阴郁的感觉，美术中的灰色可以调和其他颜色（编不下去了）。</p>`,
    `<p>喜欢灰色的人，一般干练，教养良好且只是丰富，喜欢位别人着想，稳重内敛。</p>
    `
  ],
  [
    `<h2>色调的情感</h2>`,
    `
    <p>
    单个颜色，不同明度和纯度，也会给我们带来不同的情感。
    </p> 
    <div class="content_small_img">
      <img src="img/pic5_2.jpg" style="width:20em">
      <img src="img/pic5_1.jpg" style="width:25em">
    </div>
    
    `
  ],
  [
    `<h2>色调的情感</h2>`,
    `
    <p>
    单个颜色，不同明度和纯度，也会给我们带来不同的情感。
    </p> 
    <div class="content_small_img">
      <img src="img/pic5_2.jpg" style="width:20em">
      <img src="img/pic5_1.jpg" style="width:25em">
    </div>
    
    `
  ],
  [
    `<h2>色彩搭配的情感</h2>`,
    `<p>两种或者更多的色彩搭配在一起，会给人产生不一样的情感。</p>
     <p>比如黄黑的搭配会给人警戒的感觉，红蓝搭配会让人感觉强烈冲突对立，粉红和浅黄搭配会让感觉可爱等等</p>
     <div class="content_small_img">
      <img src="img/pic6_1.jpg" style="width:15em">
      <img src="img/pic6_2.jpg" style="width:15em">
      <img src="img/pic6_3.jpg" style="width:15em">
     
    </div>
    `
  ],
  [
    `<h2>同类色，邻近色，对比色，互补色</h2>`,
    `<div class="content_small_img">
    <img c src="img/pic7.jpg" style="width:20em">
       </div>
    `
  ],

  [
    `<h2>结语</h2>`,
    `<p>色彩的奥秘还有很多，时间有限，今天就到这里</p>
    <p>接下来自由讨论吧，谢谢观赏</p>`
  ],



];


var Page = 15;
  
var PageIndex = 0;

function changeContent() {
  PageIndex = 0;
  $("#content").html(
    Content[Page][PageIndex]
  );
  ///
  addContent();
  ///
};

changeContent();

function addContent() {
  if (PageIndex <= Content[Page].length) {
    PageIndex++;
    $("#content").append(
      Content[Page][PageIndex]
    );
    ///
    // addContent();
    ///
  }
}

$(document).keydown(function (e) {
  if (e.keyCode == 40 || e.keyCode == 83) {
    
    if (Page < Content.length - 1) {
      Page += 1;
      changeContent()
    } 

  } else if (e.keyCode == 38 || e.keyCode == 87) {
    if (Page > 0) {
      Page -= 1;
      changeContent()
    } 
  } else if (e.keyCode == 32) {
    addContent();
  }
})


$("#content").on("click", ".content_small_img > img", function () {
  $("body").append(`
  <div class="big_pic">
    <img  src="${$(this).attr("src")}"> 
  </div>
  `);
})

$("body").on("click", ".big_pic", function () {
 $(this).remove();
})


$("#config_font_size").click(function(){
  $("#input_config_font_size").css("visibility","visible");
})

$("#input_config_font_size").keydown(function(e){
  if(e.keyCode == 13){
    $("body").css("fontSize",$(this).val() + 'px');
    $("#input_config_font_size").css("visibility","hidden");
  }
})


$("#open_menu").click(function(){
  let len = Content.length;
  let list  = "";
  for(let i = 0 ; i < len ; i ++){
    list += `<div name="${i}">${Content[i][0]}</div>`
  }
  $("body").append(`
  <div$ id="left_menu">
    ${list}
  </div$>
  `);
})


$("body").on("click", "#left_menu>div", function(){
  Page = +($(this).attr("name"));
  changeContent();
  $("#left_menu").remove();
})

$("body").on("click", "#left_menu", function(){
  $("#left_menu").remove();
})

